// Валидация формы ***********************************************
let selector = document.querySelector("#tel");
let im = new Inputmask("+7(999)999-99-99");
im.mask(selector);

let validation = new JustValidate("form");

validation
  .addField("#name", [
    {
      rule: "required",
      errorMessage: "Введите Ваше имя))",
    },
    {
      rule: "minLength",
      value: 2,
      errorMessage: "Упс, минимум 2 символа))",
    },
  ])

  .addField("#tel", [
    {
      validator: (value) => {
        const phone = selector.inputmask.unmaskedvalue();
        return Boolean(Number(phone) && phone.length > 0);
      },
      errorMessage: "Введите Ваш телефон))",
    },
    {
      validator: (value) => {
        const phone = selector.inputmask.unmaskedvalue();
        return Boolean(Number(phone) && phone.length === 10);
      },
      errorMessage: "Введите Ваш телефон полностью",
    },
  ])

  .addField("#msg", [
    {
      rule: "required",
      errorMessage: "Введите Ваше сообщение))",
    },
    {
      rule: "minLength",
      value: 5,
      errorMessage: "Упс, минимум 5 символов))",
    },
  ])

  .onSuccess(async function () {
    let data = {
      name: document.getElementById("name").value,
      tel: document.getElementById("tel").value,
      msg: document.getElementById("msg").value,
    };

    let response = await fetch("mail.php", {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json; charset=UTF-8",
      },
    });

    let result = await response.text();

    alert(result);
  });

// Модальное окно ***********************************************
// открыть модальное окно
document
  .getElementById("open-modal-btn")
  .addEventListener("click", function () {
    document.getElementById("my-modal").classList.add("open");
  });

// закрыть модальное окно
document
  .getElementById("close-modal-btn")
  .addEventListener("click", function () {
    document.getElementById("my-modal").classList.remove("open");
  });

// закрыть модальное окно при нажатии на Esc
window.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    document.getElementById("my-modal").classList.remove("open");
  }
});

// закрыть модальное окно при клике вне его
document
  .querySelector("#my-modal .modal__box")
  .addEventListener("click", (event) => {
    event._isClickWithInModal = true;
  });
document.getElementById("my-modal").addEventListener("click", (event) => {
  if (event._isClickWithInModal) return;
  event.currentTarget.classList.remove("open");
});

// Анимация ticker ***********************************************
const ticker = new Typed(".content__typed-text", {
  strings: ["Frontend Developer,", "Web Freelancer", "и...", "Web Designer."],
  typeSpeed: 150,
  loop: true,
});

// Анимация content ***********************************************
ScrollReveal({
  reset: true,
  distance: "1500px",
  duration: 2500,
  delay: 200,
});

ScrollReveal().reveal(".content__box", { origin: "left" });
ScrollReveal().reveal(".img-box", { origin: "right" });

// Эффект размытия фона при активации бургер меню ***********************************************
document.addEventListener("DOMContentLoaded", function () {
  const blur = document.getElementById("main");
  const burger = document.getElementById("menu");

  burger.addEventListener("click", function () {
    if (blur.style.filter === "blur(5px)") {
      blur.style.filter = "blur(0)";
    } else {
      blur.style.filter = "blur(5px)";
    }
  });
});
